<template>
  <div class="newEntryContainer">
    <div
      class="dialog animated"
      :class="open ? 'fadeIn' : 'fadeOut'"
      v-show="show"
      :style="{ visibility: visible ? 'visible' : 'hidden' }"
    >
      <div class="panel animated" :class="open ? 'zoomIn' : ''">
        <div class="title">
          学员进班
          <div class="close" @click="cancel()"></div>
        </div>
        <div class="studententrylist">
          <div class="classinfo">
            <el-row>
              <el-col :span="8">
                <span class="spanlabelweight">{{classinfo.className}}</span>
                <span class="spanlabelweight">({{classinfo.classNo}})</span>
              </el-col>
              <el-col :span="8">
                <span class="spanlabel">开班日期：</span>
                <span class="spanlabelweight">{{classinfo.createTime}}</span>
              </el-col>
              <el-col :span="8">
                <span class="spanlabel">课程名称：</span>
                <span class="spanlabelweight">{{classinfo.courseName||""}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="studentlist">
            <div style="position: relative;">
              <div style="float:left;">
                <span>上课时间</span>
                <el-select style="width:3rem;" v-model="entryTime">
                  <el-option
                    v-for="item in entryTimeList"
                    :key="item.classSyllabusId"
                    :label="item.startTime"
                    :value="item.classSyllabusId"
                  ></el-option>
                </el-select>
              </div>
              <div style="float:right;">
                <el-input
                  style="width: 4rem;"
                  placeholder="请输入学员名称\手机号"
                  clearable
                  v-model="param.keyword"
                  class="input_search"
                  maxlength="100"
                ></el-input>&emsp;
                <div class="search_btn" @click="initData">搜索</div>
              </div>
            </div>
            <br />
            <br />
            <div class="line"></div>
            <div class="tablecss">
              <table style="width:100%;table-layout:fixed;" cellpadding="0" cellspacing="0">
                <thead>
                  <tr>
                    <th
                      style="min-width:0.3rem;line-height: 0.42rem;display: flex;justify-content: center;"
                    >
                      <div
                        class="checkyes"
                        v-if="allchecked"
                        @click="CheckAll"
                        style="margin-top:0.14rem;"
                      ></div>
                      <div class="checkno" v-else @click="CheckAll" style="margin-top:0.14rem;"></div>
                      <!--<el-checkbox  v-model="allchecked" @change="CheckAll"></el-checkbox>-->
                    </th>
                    <th style="max-width:0.2rem;">序号</th>
                    <th>学员</th>
                    <th>年龄</th>
                    <th>家长</th>
                    <th>联系电话</th>
                    <th>学员状态</th>
                    <th style="max-width:1rem;">末次沟通内容</th>
                    <th style="max-width:1rem;">备注</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody v-if="studentList.length>0">
                  <tr v-for="li,index in studentList">
                    <td
                      align="center"
                      style="line-height: 0.42rem;display: flex;justify-content: center;"
                    >
                      <div
                        class="checkyes"
                        v-if="li.checked"
                        @click="CheckSimple(li)"
                        style="margin-top:0.14rem;"
                      ></div>
                      <div
                        class="checkno"
                        v-else
                        @click="CheckSimple(li)"
                        style="margin-top:0.14rem;"
                      ></div>
                    </td>
                    <th>{{index+1}}</th>
                    <td align="center">
                      <span>{{li.realName}}</span>
                      <span v-if="li.gender==1">（男）</span>
                      <span v-if="li.gender==2">（女）</span>
                    </td>
                    <td align="center" v-if="li.age == 0"></td>
                    <td align="center" v-else>{{li.age}}岁</td>
                    <td align="center">{{li.parentData[0].parentName}}</td>
                    <td align="center">{{li.phone}}</td>
                    <td align="center">
                      <span>正常</span>
                    </td>
                    <td
                      align="center"
                      
                    >
                      <div
                        style="cursor: pointer;line-height: 0.52rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;"
                        :title="li.lastVisitContent"
                      >{{li.lastVisitContent}}</div>
                    </td>
                    <td align="center"><div
                        style="cursor: pointer;line-height: 0.52rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;"
                        :title="li.remark"
                      >{{li.remark}}</div></td>
                    <td align="center">
                      <el-button @click="simpleEnterClass(li)" type="text" size="small">进班</el-button>
                    </td>
                  </tr>
                </tbody>
                <tbody v-else>
                  <tr>
                    <td colspan="11" align="center">暂无数据</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <el-pagination
              style="margin-top:0.1rem;"
              layout="total, sizes, prev, pager, next, jumper"
              :current-page="param.currPage"
              @size-change="pageSizeChange"
              @current-change="tabledisplayChangePage"
              :total="count"
            ></el-pagination>
            <div class="btnEnter">
              <el-button class="enterBtn" @click="enterClass">进班</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      allchecked: false,
      classinfo: {},
      studentList: [],
      selectStudentList: [], //选中的学员
      entryTimeList: [], //上课时间列表
      count: 0,
      entryTime: "", //选择的上课时间
      param: {
        keyword: "",
        type: 0,
        campusId: this.$store.state.campusId,
        currPage: 1,
        pageSize: 10
      }
    };
  },
  methods: {
    init: function(data) {
      var vm = this;
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      vm.classinfo = data.item;
      vm.entryTimeList = [];
      vm.param = {
        keyword: "",
        type: 0,
        campusId: this.$store.state.campusId,
        currPage: 1,
        pageSize: 10
      };
      vm.entryTime = "";
      if (data.li != null) {
        vm.entryTimeList.push(data.li);
        vm.entryTime = data.li.classSyllabusId;
      } else {
        api
          .subscriptionList({ classId: vm.classinfo.classId })
          .then(function(data) {
            if (data.resultCode == 2000) {
              vm.entryTimeList = data.list;
            } else {
              vm.$message({
                message: data.message,
                type: "warning"
              });
            }
          });
      }
      this.initData();
    },
    pageSizeChange: function(val) {
      this.param.pageSize = val;
      this.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      this.param.currPage = val;
      this.initData();
    },
    initData() {
      var vm = this;
      api.clueList(vm.param).then(function(data) {
        data.list.forEach(function(item) {
          item.checked = false;
          item.phone = item.parentData[0] ? item.parentData[0].phone : "";
        });

        vm.studentList = data.list;
        console.log(vm.studentList);
        vm.count = data.totalCount;
      });
    },
    cancel: function() {
      var vm = this;
      vm.$emit("callback", "添加成功");
      //隐藏弹窗
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
        this.studentList = [];
        this.allchecked = false;
        vm.selectStudentList = [];
      }, 500);
    },
    /**
     * 全选
     */
    CheckAll() {
      var vm = this;
      if (this.allchecked) {
        this.allchecked = false;
        vm.selectStudentList = [];
        for (let i = 0; i < this.studentList.length; i++) {
          this.studentList[i].checked = false;
        }
      } else {
        this.allchecked = true;
        for (let i = 0; i < this.studentList.length; i++) {
          this.studentList[i].checked = true;
          vm.selectStudentList.push(this.studentList[i]);
        }
      }
    },
    CheckSimple(item) {
      var vm = this;
      if (item.checked) {
        let index = vm.selectStudentList.indexOf(item);
        if (index == -1) return;
        vm.selectStudentList.splice(index, 1);
        item.checked = false;
        console.log(vm.selectStudentList);
      } else {
        item.checked = true;
        vm.selectStudentList.push(item);
      }
    },
    simpleEnterClass(item) {
      var vm = this;
      if (vm.entryTime == "") {
        this.$message.warning("请选择上课时间");
        return;
      }
      api
        .sysllabusStudentAdd([
          {
            clueId: item.clueId,
            classSyllabusId: vm.entryTime
          }
        ])
        .then(function(data) {
          console.log(data);
          if (data.resultCode == 2000) {
            vm.$message({
              message: "进班成功",
              type: "success"
            });
            vm.cancel();
          } else {
            vm.$message.error(data.message);
          }
        });
    },
    enterClass() {
      var vm = this;
      if (vm.selectStudentList.length == 0) return;
      if (vm.entryTime == "") {
        this.$message.warning("请选择上课时间");
        return;
      }
      let param = [];
      vm.selectStudentList.forEach(item => {
        param.push({
          clueId: item.clueId,
          classSyllabusId: vm.entryTime
        });
      });
      api.sysllabusStudentAdd(param).then(function(data) {
        console.log(data);
        if (data.resultCode == 2000) {
          vm.$message({
            message: "添加成功",
            type: "success"
          });
          vm.cancel();
        } else {
          vm.$message.error(data.message);
        }
      });
    }
  },
  created: function() {
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
  }
};
</script>
<style lang="scss">
@import "@/style/module/utils.scss";
.newEntryContainer {
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .el-checkbox__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .studententrylist {
    width: 100%;
    max-height: 30rem;
    padding: 0 0.31rem 0.3rem 0.31rem;

    .classinfo {
      width: 100%;
      height: 0.3rem;

      line-height: 0.3rem;
    }
    .studentlist {
      width: 100%;
      max-height: 30rem;
      margin-top: 0.2rem;

      .line {
        height: 1px;
        width: inherit;
      }
      .btnEnter {
        height: 0.5rem;
        line-height: 0.5rem;
        margin-top: 0.2rem;
        .enterBtn {
          width: 1.6rem;
          height: 0.4rem;
          font-size: 0.16rem;
          background: #3885f8;
          color: #ffffff;
          border-radius: 0.1rem;
        }
      }
    }
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
</style>





